<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>我是主页</h1>
    <button>主页</button>
    <button>产品页面</button>
    <button>用户页面</button>
    <script>
      var btns = document.querySelectorAll("button");
      btns.forEach(function (item, key) {
        item.onclick = function () {
          //修改地址的hash值 不会让地址重新加载
          window.location.hash = "page" + (key + 1);
          renderDom();
        };
      });

      //通过hash值来区分页面
      function renderDom() {
        //获取hash值来区分不同的页面
        var hashStr = window.location.hash;
        console.log(hashStr);
        var h1Ele = document.querySelector("h1");
        switch (hashStr) {
          case "#page1":
            h1Ele.innerHTML = "主页";
            break;
          case "#page2":
            h1Ele.innerHTML = "产品页面";
            break;
          case "#page3":
            h1Ele.innerHTML = "用户页面";
            break;
          default:
            console.log("获取hash值错误");
            break;
        }
      }
    </script>
  </body>
</html>
